<style lang="scss" scoped>
    @import "@/assets/css/variable";
    .applyForm{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: $main-bgc;
        min-height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding: 1.6rem;
        .box1{
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .line{
                font-size: 1.2rem;
                display: flex;
                align-items: center;
                span{
                    flex: 1;
                }
            }
        }
        .box2{
            background-color: white;
            .line{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .title{
                font-size: 1.4rem;
                font-weight: bold;
            }
        }
    }
</style>
<template>
  <div class="applyForm">
      <div class="box1 padding-all-m border-r-l" v-if="item">
          <div class="title title-l">{{item.title}}</div>
          <div class="line">
              <span class="label color-s">商户名称</span><span class="value">{{item.merchantname}}</span>
          </div>
          <div class="line">
              <span class="label color-s">报名费用</span><span class="value" :style="{color:$store.getters.getMasterColor}">{{item.apply_charge>0?(item.apply_charge+'元'):'免费'}}</span>
          </div>
      </div>
      <div class="box2 padding-all-m border-r-l margT-l" v-if="item">
          <div>
              <span class="title">报名信息</span><span class="color-s fs-12 margL-l">以下均为<span :style="{color:$store.getters.getMasterColor}">必填</span></span>
          </div>
          <div>
                <div class="margT-l" v-if="item.create_form">
                    <k-form-build ref="kfb" :value="item.create_form" />
                </div>
          </div>
      </div>
      <div class="fix-bottom padding-lr">
         <van-button :color="$store.getters.getMasterColor" block @click="submit">提交</van-button>
      </div>
      <!-- <div style="">openId:{{openid}}</div> -->
      <!-- <div>openId2:{{openId2}}</div> -->
  </div>
</template>

<script>
import {Button,Toast,Dialog} from 'vant'
// import Vue from 'vue'
import KFormDesign from 'k-form-design';
// import 'k-form-design/lib/k-form-design.css';
Vue.use(KFormDesign)
// import utils from '@/assets/js/utils.js';

export default {
    name:"ApplyForm",
    components: {
      [Button.name]: Button,
      [Dialog.name]: Dialog,
      KFormDesign
    },
    data () {
        return {
            item: '',
            openid: ''
        }
    },
    // computed: {
    //     getOpenId() {
    //         this.openid = this.$store.state.openid
    //         return this.openid
    //     }
    // },
    mounted() {
        const _this = this;
        this.item = this.$store.getters.getActivityItem
        if(!this.item){
            //this.$router.go(-1)
        }
        _this.openid = localStorage.getItem("COPENID") || _this.$store.state.openid
    },
    methods: {
        submit() {
            const _this = this
            _this.$refs.kfb.getData().then(values => {
                console.log('验证通过', values)
                // values.create_time = utils.formatDateYMDHM(new Date())
                // values.openid = _this.openid
                // values.is_sure = 0
                let apply_list = []
                apply_list.push(values)
                //values.name = utils.formatName(values.name)
                // console.log("_this.item.apply_list",_this.item.apply_list)
                // let apply_list = []
                // console.log("typeof _this.item.apply_list == object", typeof _this.item.apply_list == 'object' )
                // if(typeof _this.item.apply_list == 'Array' || typeof _this.item.apply_list == 'object') {
                //     // apply_list = []
                //     apply_list = _this.item.apply_list==null?[]:_this.item.apply_list
                //     console.log("======values======",values)
                //     console.log("======apply_list======",apply_list)
                //     apply_list.push(values)
                // }else{
                //     apply_list = []
                //     apply_list.push(values)
                // }
                // _this.activitySave(apply_list)
                _this.getOrderSave(apply_list)
            }).catch(() => {
                console.log('验证未通过，获取失败')
            })   
        },
        getOrderSave(apply_list) {
            const _this = this
            let params = {
                activity_id: this.item.id,// 活动ID
                val: JSON.stringify(apply_list),// 自定义表单数据
                // status: 1,// 是否打款 1否 2是
                writeoff: 1,// 是否核销 1否 2是
                // ordersn: '',// 订单编号
                // paytime: '',// 支付时间
                // transid: '',// 微信订单号
                price: this.item.apply_charge,// 单价
                num: 1,// 数量
                openid: _this.openid,
                // id: _this.item.id,// 修改的时候需要传
                // apply_list: apply_list
            }
            this.$request.getOrderSave(params).then(res=>{
                if(res.ret == 400) {
                    Dialog({ message: res.msg });
                    return
                }else if(res.ret == 200) {
                    if(this.item.is_need_pay==1) {
                        let weixinParams = {
                            "appId": res.data.appId,// 公众号appId，由商户传入
                            "timeStamp": res.data.timeStamp,// 时间戳
                            "nonceStr": res.data.nonceStr,// 随机串     
                            "package": res.data.package,
                            "signType": res.data.signType,// 微信签名方式
                            "paySign": res.data.paySign// 微信签名 
                        }
                        WeixinJSBridge.invoke('getBrandWCPayRequest', weixinParams, function(res) {
                            // Toast(res.err_msg)
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                Toast('支付成功!')
                                // WeixinJSBridge.call('closeWindow');
                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                Toast('取消支付!')
                                // WeixinJSBridge.call('closeWindow');
                            } else {
                                Toast('支付失败!')
                            }
                            _this.$router.go(-1)
                            // WeixinJSBridge.call('closeWindow');
                        })
                    }else{
                        Toast("支付成功")
                        setTimeout(function(){
                            _this.$router.go(-1)
                        },1000)
                    }
                }
            }).catch(res=>{
                Toast("出错了")
            })
        },
        activitySave(apply_list) {
            const _this = this
            let params = {
                openid: _this.openid,
                id: _this.item.id,
                apply_list: apply_list
            }
            console.log("params",params)
            this.$request.activitySave(params).then(res=>{
                if(res.ret == 200){
                    Toast("操作成功")
                    setTimeout(function(){
                        _this.$router.go(-1)
                    },2000)
                }
            }).catch(res=>{
                Toast("出错了")
            })
        }
    }
}
</script>